<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情 | 机械配件商城</title>
		<link rel="stylesheet" type="text/css" href="./element-ui/index.css">
		<link rel="stylesheet" type="text/css" href="./css/common.css" />
		<link rel="stylesheet" type="text/css" href="./components/min-width-container.css"/>
		<link rel="stylesheet" type="text/css" href="./components/footer-bottom.css"/>
		<link rel="stylesheet" type="text/css" href="./components/footer-image.css" />
		<link rel="stylesheet" type="text/css" href="./components/footer-link.css" />
		<link rel="stylesheet" type="text/css" href="./components/header-full.css" />
		<style>
			.content-commodity{
				display: flex;
			}
			
			.content-commodity-wapper{
				flex-grow: 1;
			}
			
			.content-commodity-wapper-flex{
				display: flex;
			}
			
			.content-commodity-left-image{
				width: 378px;
				height: 378px;
				border: 1px solid #E9E9E9;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			
			.content-commodity-right{
				flex-grow: 1;
			}
			
			.content-commodity-left-subimages{
				display: flex;
				height: 58px;
			}
			
			.content-commodity-left-subimages-images{
				flex-grow: 1;
				position: relative;
			}
			
			.content-commodity-left-subimages-last, .content-commodity-left-subimages-next{
				width: 29px;
				background: #E1DFE0;
				line-height: 58px;
				text-align: center;
			}
			
			.content-commodity-left-subimages-images-container{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				overflow-x: scroll;
				overflow-y: hidden;
				white-space: nowrap;
			}
			
			.content-commodity-left-subimages-images-container::-webkit-scrollbar{
			   display:none;
			}
			
			.content-commodity-left-subimages-images-container > div{
				display: inline-block;
				width: 58px;
				height: 58px;
				border: 1px solid #E1DFE0;
				margin-left: 8px;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			
			.content-commodity-left-subimages-images-container > div:last-child{
				margin-right: 8px;
			}
			
			.content-commodity-recommend{
				width: 172px;
				flex-shrink: 0;
			}
			
			.content-commodity-recommend-item .el-image{
				width: 103px;
				height: 103px;
			}
			
			.content-commodity-right{
				padding: 0 32px;
				border-right: 1px solid #EBEBEB;
			}
			
			.content-commodity-right-selected{
				width: 93px;
				height: 33px;
				line-height: 31px;
				display: inline-block;
				border: 1px solid #41B6E7;
				background-position: bottom right;
				background-repeat: no-repeat;
				background-image: url(images/selected.png);
			}
			
			.content-commodity-right-price{
				height: 77px;
				background: #EEEEEE;
				padding: 8px;
			}
			
			.content-commodity-right-num .el-input-number__decrease, .content-commodity-right-num .el-input-number__increase{
				height: 26px;
				line-height: 26px;
			} 
			
			.content-commodity-right-buy > div{
				width: 140px;
				height: 40px;
				line-height: 40px;
				display: inline-block;
				vertical-align: middle;
			}
			
			.content-commodity-right-buy > div:first-child{
				border: 1px solid #F99652;
				background: #FDEAD1;
				color: #E58948;
			}
			
			.content-commodity-right-buy > div:last-child{
				background: #F27300;
				color: white;
			}
			
			.content-commodity-right-ask{
				display: flex;
				align-items: center;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<header-full :bordered="true"></header-full>
			<min-width-container>
				<div class="content">
					<div class="m-t-12 m-b-12">
						<el-breadcrumb separator-class="el-icon-arrow-right">
						  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
						  <el-breadcrumb-item>某个类型</el-breadcrumb-item>
						</el-breadcrumb>
					</div>
					<div class="content-commodity m-b-20">
						<div class="content-commodity-wapper">
							<div class="content-commodity-wapper-flex  m-b-20">
								<div class="content-commodity-left">
									<div class="content-commodity-left-image" :style="{backgroundImage: 'url(' + commodity.iconUrl + ')'}"></div>
									<div class="content-commodity-left-subimages m-t-8">
										<div class="content-commodity-left-subimages-last text-weak-4 pointer"><span class="el-icon-arrow-left"></span></div>
										<div class="content-commodity-left-subimages-images">
											<div class="content-commodity-left-subimages-images-container">
												<div v-for="item in subImageUrls" class="pointer" >
													<el-image
															style="width: 100%; height: 100%"
															:src="item"
															:preview-src-list="subImageUrls">
													</el-image>
												</div>
											</div>
										</div>
										<div class="content-commodity-left-subimages-next text-weak-4 pointer"><span class="el-icon-arrow-right"></span></div>
									</div>
								</div>
								<div class="content-commodity-right text-4 text-general-1">
									<div class="content-commodity-right-title text-2 text-important" style="font-weight: 900;">{{commodity.name}}</div>
									<div class="content-commodity-right-price m-t-16">现价: <span class="text-3" style="color: #F76016; font-weight: 900;">{{commodity.price.toFixed(2)}}</span></div>
									<div class="content-commodity-right-addr m-t-12 m-b-12">发货地: 北京市 <span class="m-l-8 m-r-4">配送方式:</span> <el-radio v-model="radio" label="1" disabled>到付</el-radio><el-radio v-model="radio" label="2">在线支付</el-radio></div>
									<el-divider></el-divider>
									<div class="content-commodity-right-num">数量: <el-input-number v-model="num" size="mini" :min="1" :max="10" label="选择一个数量"></el-input-number></div>
									<div class="content-commodity-right-method m-t-16">购买方式：<div class="content-commodity-right-selected text-general-1 text-4 center">余额支付</div></div>
									<el-divider></el-divider>
									<div class="content-commodity-right-buy">
										<div class="center text-3 pointer m-l-12" @click="go_buy">立即购买</div>
										<div class="center text-3 pointer m-l-8" @click="add_to_cart">加入购物车</div>
									</div>
									<div class="content-commodity-right-ask m-t-12 m-b-12">
										<div class="m-r-16">服务承诺:</div>
										<div><img src="images/pledges_01.jpg"/></div>
										<div><img src="images/pledges_02.jpg"/></div>
										<div><img src="images/pledges_03.jpg"/></div>
									</div>
								</div>
							</div>
							<div>
								<el-tabs v-model="activeName" type="card">
								    <el-tab-pane label="商品详情" name="first" v-html="commodity.detail"></el-tab-pane>
								    <el-tab-pane label="规格参数" name="second" v-html="commodity.specParam"></el-tab-pane>
								</el-tabs>
							</div>
						</div>
						<div class="content-commodity-recommend">
							<div class="center text-3 text-general-1" style="font-weight: 900;">相关配件</div>
							<div>
								<ul>
									<li v-for="item in 4" class="content-commodity-recommend-item m-t-20">
										<div class="center"><el-image src="/images/product4.png"></el-image></div>
										<div class="center text-general-1 text-4">中联重科液压油18</div>
										<div class="center text-4" style="font-weight: 900;color: #F27300;">¥279.00</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</min-width-container>
			<footer-image></footer-image>
			<footer-link></footer-link>
			<footer-bottom></footer-bottom>
		</div>
		<script src="./js/vue.js"></script>
		<script src="./js/axios.min.js"></script>
		<script src="./element-ui/index.js"></script>
		<script src="./components/min-width-container.js"></script>
		<script src="./components/footer-image.js"></script>
		<script src="./components/footer-bottom.js"></script>
		<script src="./components/footer-link.js"></script>
		<script src="./components/header-full.js"></script>
		<script>
		    const app = new Vue({
		        el: "#app",
		        data(){
					return {
						id: '',
						activeName: 'first',
						radio: '2',
						num: 1,
						commodity: {},
						subImageUrls: []
					};
		        },
		        methods: {
		            go_buy(){
		            	if(this.id){
							//保存商品信息到sessionStorage
							const simulated_cart = {
								lists: [{
										productId: this.commodity.id,
										name: this.commodity.name,
										price: this.commodity.price,
										quantity: this.num,
										totalPrice: this.num * this.commodity.price,
								}],
								totalPrice: this.commodity.price * this.num,
								is_simulated_cart: true
							}
							sessionStorage.setItem("cart", JSON.stringify(simulated_cart));
							//跳转到提交订单页面
							window.location.href = "/submit-order.html";
		            	}
					},
					add_to_cart(){
						if(this.id){
							const params = new URLSearchParams();
							params.append("productId", this.id);
							params.append("count", this.num);
							axios.post("/cart/savecart.do", params).then(response=>{
								if(response.data.status === 0){
									this.$message({
										message: "添加到购物车成功",
										type: "success"
									});
								}else{
									this.$message.error(response.data.msg);
								}
							}).catch(err=>{
								this.$message.error("连接服务器异常");
							});
						}
					}
		        },
		        created(){
		        	const query = window.location.search;
		        	const id = query.substring(1, query.length);
					if(/^\d+$/.test(id)){
						this.id = id;
						const params = new URLSearchParams();
						params.append('productId', id);
						axios.post("/product/getdetail.do", params).then(response=>{
							if(response.data.status === 0){
								this.commodity = response.data.data;
								this.subImageUrls = this.commodity.subImages.split(";");

							}else{
								this.$message.error(response.data.msg);
							}
						}).catch(err=>{
							this.$message.error("连接服务器异常");
						});
					}else{
						this.$message.error("参数错误");
					}

		        }
		    });
			
		</script>
	</body>
</html>
